import React, { Component } from 'react';
import _ from 'underscore';
import cx from 'classnames';

import Select, { SelectOption, SelectOptionGroup } from 'lib/components/Select.jsx';

import { defaultOptionExtensions } from '../Constants.es6';

class SelectOption2 extends SelectOption {
  constructor(props, context) {
    super(props, context);

    this.state = {
      forceExtensionStyle: {},
      forceItemStyle: {}
    }; // state
  }
  onSelectHandler(item, e) {
    let result = {
      label: this.props.op.label,
      value: this.props.op.value,
      displayText: item.getDisplayText(this.props.op.label),
      extension: item,
    };

    this.props.mouseDown(result);
  } // onSelectHandler

  renderRight() {
    return (
      this.props.op.object.id !== undefined
        ? (
          <div className="icon-right"></div>
        ) : null
    );
  } // renderRight

  renderExtension(style = {}, currentItem) {
    return (
      this.props.op.object.id !== undefined
        ? (
          <div className="float-container" style={ style }>
            <ul>
            {
              defaultOptionExtensions.map(item => (
                <li
                  key={ item.value }
                  className={ cx('Select-option', {
                    'is-focused': currentItem ? item.value === currentItem.subValue : false
                  }) }
                  onClick={ this.onSelectHandler.bind(this, item) }>
                  { item.label }
                </li>
              ))
            }
            </ul>
          </div>
        ) : null
    );
  } // renderExtension

  forceMouseEnter() {
    this.setState({
      forceExtensionStyle: {
        display: 'block'
      },
      forceItemStyle: {
        cursor: 'default'
      }
    });
  } // forceMouseEnter

  forceMouseLeave() {
    this.setState({
      forceExtensionStyle: {
        display: 'none'
      },
      forceItemStyle: {}
    });
  } // forceMouseLeave

  render() {
    if (this.props.op.object.id === undefined) {
      return super.render();
    }

    if (this.props.op.disabled) {
      let currentItem = this.props.getSelectedItem();
      if (currentItem) {
        return (
          <div
            onMouseEnter={ this.forceMouseEnter.bind(this) }
            onMouseLeave={ this.forceMouseLeave.bind(this) }
            className={ this.props.optionClass } style={ this.state.forceItemStyle }>
            { this.props.op.label }
            { this.renderRight() }
            { this.renderExtension(this.state.forceExtensionStyle, currentItem) }
          </div>
        );
      } else {
        return (
          <div className={ this.props.optionClass }>
            { this.props.op.label }
            { this.renderRight() }
            { this.renderExtension() }
          </div>
        );
      }
    } else {
      return (
        <div
          className={ this.props.optionClass }
          onMouseEnter={ e => this.props.mouseEnter(e) }
          onMouseLeave={ e => this.props.mouseLeave(e) }>
          { this.props.op.label }
          { this.renderRight() }
          { this.renderExtension() }
        </div>
      );
    }
  } // render
}

class SelectOptionGroup2 extends SelectOptionGroup {
  renderOptionParameters(op) {
    return _.tap(super.renderOptionParameters(op),
      p => p.mouseDown = item => this.props.selectValue(item.displayText ? item : op));
  }
}

export default class ValueContainer extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      isMouseOver: false
    };
  } // constructor

  mouseOverHandler(isMouseOver) {
    this.setState({ isMouseOver });
  } // mouseOverHandler

  render() {
    let currentItem = _.chain(this.props.options)
                       .map(p => p.options)
                       .flatten(true)
                       .find(p => p.value === this.props.value)
                       .tap(p => {
                         if (this.props.getDisplayText) {
                           p.displayText = this.props.getDisplayText(p.label);
                           p.subValue = this.props.subValue;
                         }
                       })
                       .value();

    return (
      <div className="value-container">
        <Select
          SelectOption={ SelectOption2 }
          SelectOptionGroup={ SelectOptionGroup2 }
          className="value"
          dropdownClassName="Select-menu-outer-noscroll"
          openDisabled={ true }
          showSingleTooltip={ true }
          value={ currentItem }
          options={ this.props.options }
          onChange={ this.props.onChanged } />
        <div className="spliter">
        {
          /**
           * 1. isMouseOver === true 时展示减号按钮，响应删除当前条件事件。
           * 2. isLast 时总是展示减号按钮，响应删除整个指标事件。
           * 3. 优先级依照序号升序，逐级提高。
           *
           * isLast && isMouseOver button     显示减号按钮
           * isLast && !isMouseOver button    显示减号按钮
           *
           * !isLast && isMouseOver button    显示减号按钮
           * !isLast && !isMouseOver button   显示“和”汉字
           */
          !this.props.isLast && !this.state.isMouseOver ? (
            <span onMouseEnter={ this.mouseOverHandler.bind(this, true) }>和</span>
          ) : (
            <div
              className="btn-subtract"
              onClick={ this.props.onRemoving }
              onMouseLeave={ this.mouseOverHandler.bind(this, false) }>
              <i className="iconfont">&#xe6bf;</i>
            </div>
          )
        }
        </div>
      </div>
    );
  } // render
}

ValueContainer.defaultProps = {
  isLast: true,
  onRemoving: null,
  onChanged: null
}
